// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'vars/lib' as *;

:root {
    // black and white
    --m24-white: #{$token-color-white};
    --m24-off-white: #{$token-color-off-white};
    --m24-black: #{$token-color-black};
    --m24-off-black: #{$token-color-off-black};

    // gray
    --m24-light-gray: #{$token-color-light-gray};
    --m24-light-mid-gray: #{$token-color-light-mid-gray};
    --m24-mid-gray: #{$token-color-mid-gray};
    --m24-dark-mid-gray: #{$token-color-dark-mid-gray};
    --m24-dark-gray: #{$token-color-dark-gray};

    // green
    --m24-green: #{$token-color-green};
    --m24-light-green: #{$token-color-light-green};
    --m24-dark-green: #{$token-color-dark-green};

    // pink
    --m24-pink: #{$token-color-pink};
    --m24-light-pink: #{$token-color-light-pink};
    --m24-dark-pink: #{$token-color-dark-pink};

    // orange
    --m24-orange: #{$token-color-orange};
    --m24-light-orange: #{$token-color-light-orange};
    --m24-dark-orange: #{$token-color-dark-orange};

    // grid
    --grid-margin: 16px;
    --grid-gutter: 8px;

    // spacers
    --spacer-3xl: 80px;
    --spacer-2xl: 64px;
    --spacer-xl: 32px;
    --spacer-lg: 24px;
    --spacer-md: 16px;
    --spacer-sm: 8px;
    --spacer-xs: 8px;
    --spacer-2xs: 4px;

    // container
    --container-padding: 16px;

    // titles
    --text-title-2xl: 48px;
    --text-title-xl: 32px;
    --text-title-lg: 24px;
    --text-title-md: 18px;
    --text-title-sm: 16px;
    --text-title-xs: 14px;

    // titles line height
    --text-title-2xl-line-height: 1.166;
    --text-title-xl-line-height: 1.125;
    --text-title-lg-line-height: 1.166;
    --text-title-md-line-height: 1.25;
    --text-title-sm-line-height: 1.25;
    --text-title-xs-line-height: 1.25;

    // body
    --text-body-xl: 24px;
    --text-body-lg: 18px;
    --text-body-md: 16px;
    --text-body-sm: 14px;

    // body line height
    --text-body-line-height: 1.5;

    // buttons
    --text-button-xl: 24px;
    --text-button-lg: 18px;
    --text-button-md: 16px;
    --text-button-sm: 14px;

    // labels
    --text-label: 12px;
}

@media #{$mq-md} {
    :root {
        // grid
        --grid-margin: 24px;
        --grid-gutter: 12px;

        // spacers
        --spacer-3xl: 128px;
        --spacer-2xl: 80px;
        --spacer-xl: 64px;
        --spacer-lg: 32px;
        --spacer-md: 24px;
        --spacer-sm: 16px;
        --spacer-xs: 8px;
        --spacer-2xs: 4px;

        // container
        --container-padding: 24px;

        // title
        --text-title-2xl: 80px;
        --text-title-xl: 64px;
        --text-title-lg: 48px;
        --text-title-md: 32px;
        --text-title-sm: 24px;
        --text-title-xs: 18px;

        // body
        --text-body-xl: 32px;
        --text-body-lg: 24px;
        --text-body-md: 18px;
        --text-body-sm: 16px;

        // buttons
        --text-button-xl: 32px;
        --text-button-lg: 24px;
        --text-button-md: 18px;
        --text-button-sm: 16px;

        // labels
        --text-label: 14px;
    }
}

@media #{$mq-xl} {
    :root {
        // grid
        --grid-margin: 32px;
        --grid-gutter: 16px;

        // spacers
        --spacer-3xl: 200px;
        --spacer-2xl: 128px;
        --spacer-xl: 64px;
        --spacer-lg: 32px;
        --spacer-md: 24px;
        --spacer-sm: 16px;
        --spacer-xs: 8px;
        --spacer-2xs: 4px;

        // container
        --container-padding: 32px;

        // titles
        --text-title-2xl: 128px;
        --text-title-xl: 80px;
        --text-title-lg: 64px;
        --text-title-md: 48px;
        --text-title-sm: 32px;
        --text-title-xs: 24px;

        // body
        --text-body-xl: 48px;
        --text-body-lg: 24px;
        --text-body-md: 18px;
        --text-body-sm: 16px;

        // buttons
        --text-button-xl: 48px;
        --text-button-lg: 32px;
        --text-button-md: 24px;
        --text-button-sm: 18px;

        // labels
        --text-label: 16px;
    }
}
